﻿<div class="tabs-users">
    <ul>
        <li><a data-ng-class="{active : activeViewPath==='/esgProfile' || isActive('/esgProfile') }" href="#/esgProfile">ESG Profiles </a></li>
    </ul>
</div><br />


<form name="esgProfileForm" novalidate>

    <!--<div class="table-row-inp">
        <div class="inp-label">Weight matrix</div>
        <div class="inp-holder">
           
            <select required class="select-box" style="width: 96%;" ng-model="esgProfile.DefaultProfile.matrixId">
                <option ng-selected="e.id == esgProfile.DefaultProfile.matrixId " ng-repeat="e in esgProfile.UI.listMatrixes" value="{{e.id}}">{{e.name}}</option>
            </select>

        </div>
    </div>



    <div class="table-row-inp">
        <div class="inp-label">Reference Universe</div>
        <div class="inp-holder">
            <select required class="select-box" style="width: 96%;" ng-model="esgProfile.DefaultProfile.referenceUniverseId">
                <option ng-selected="e.id == esgProfile.DefaultProfile.referenceUniverseId " ng-repeat="e in esgProfile.UI.listReferenceUniverses" value="{{e.id}}">{{e.name}}</option>
            </select>
        </div>
    </div>

    <div class="table-row-inp">
        <div class="inp-label">Comparative group</div>
        <div class="inp-holder">
            <select required class="select-box" style="width: 96%;" ng-model="esgProfile.DefaultProfile.comparativeGroup">
                <option value="0">Peer group</option>
                <option value="1">Industry</option>
            </select>
        </div>
    </div>

    <div class="table-row-inp">
        <div class="inp-label">Template type</div>
        <div class="inp-holder">
            <select required class="select-box" style="width: 96%;" ng-model="esgProfile.DefaultProfile.templateType">
                <option value="0">Type A</option>
                <option value="1">Type B</option>
                <option value="2">All</option>

            </select>
        </div>
    </div>

    <div class="table-row-inp">
        <div class="inp-label">Company type</div>
        <div class="inp-holder">
            <select required class="select-box" style="width: 96%;" ng-model="esgProfile.DefaultProfile.companyType">
                <option value="0">Public</option>
                <option value="1">Private</option>
                <option value="2">All</option>
            </select>
        </div>
    </div>



    <button class="btn-green" style="width: 151px;" ng-click="esgProfile.saveDefaultProfile()">Save changes</button>-->

    <!-- NEW HTML -->
    <div style="display: table; width: 99%;">
        <div class="table-row-inp">
            <div class="inp-label">Select Account</div>
            <div class="inp-holder">
                <select ng-change="esgProfile.loadEsgProfiles()" class="select-box" style="width: 96%;" ng-model="esgProfile.accountId">
                    <option value="{{opt.id}}" ng-repeat="opt in esgProfile.accountsList">{{opt.name}}</option>
                </select>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div><br />
    <div class="table_g">
        <!--<button class="btn-green" ng-show="esgProfile.isEdit == undefined && esgProfile.accountId != null && esgProfile.accountId != '' && esgProfile.accountId != undefined && esgProfile.accountIsTier1()" ng-click="esgProfile.addProfile()">Add new profile</button>-->
        <button class="btn-green" ng-show="esgProfile.isEdit == undefined && esgProfile.accountIsSelected() && esgProfile.accountIsTier1()" ng-click="esgProfile.addProfile()">Add new profile</button>
        <div class="table-row_g" ng-show="esgProfile.accountId != null && esgProfile.accountId != '' && esgProfile.accountId != undefined">
            <div class="table-head_g width_200">Profile Name</div>
            <div class="table-head_g width_200">Weight matrix</div>
            <div class="table-head_g center-align width_200">Reference Universe</div>
            <div class="table-head_g center-align width_130">Template type</div>
            <div class="table-head_g center-align width_130">Company type</div>
            <div class="table-head_g center-align width_130">Active</div>
            <div class="table-head_g center-align width_130">Suggested</div>
            <div class="table-head_g center-align width_130">Actions</div>
        </div>
        <div class="table-row_g"  ng-repeat="item in esgProfile.UI track by item.id">
            <div class="table-cell_g width_200" style="border-left: 1px solid #e0e0e0;" ng-class="{'last':$last}">
                <span ng-show="!esgProfile.getToggleState(item.id)">{{ item.name != null && item.name != undefined && item.name.length > 23 ? item.name.substring(0, 23) + '...' : item.name }}</span>
                <input type="text" ng-show="esgProfile.getToggleState(item.id)" ng-model="item.name" />
            </div>
            <div class="table-cell_g width_200" ng-class="{'last':$last}">
                <span style="width: 96%;" ng-show="!esgProfile.getToggleState(item.id)">{{item.matrixName}}</span>
                <select required class="select-box" ng-show="esgProfile.getToggleState(item.id)" ng-model="item.matrixId">
                    <option ng-selected="e.id == item.matrixId" style="width: 96%;" ng-repeat="e in esgProfile.weightMatrices" value="{{e.id}}">{{e.name}}</option>
                </select>
            </div>
            <div class="table-cell_g center-align width_200" ng-class="{'last':$last}">
                <span style="width: 96%;" ng-show="!esgProfile.getToggleState(item.id)"> {{item.referenceUniverseName}}</span>
                <select required class="select-box" style="width: 96%;" ng-show="esgProfile.getToggleState(item.id)" ng-model="item.referenceUniverseId">                   
                    <option ng-selected="e.id == item.referenceUniverseId" style="width: 96%;" ng-repeat="e in esgProfile.referenceUniverses" value="{{e.id}}">{{e.name}}</option>
                </select>
            </div>
            <div class="table-cell_g center-align width_130" ng-class="{'last':$last}">
                <span style="width: 96%;" ng-show="!esgProfile.getToggleState(item.id)">{{esgProfile.imposeTemplateType(item)}}</span>
                <select required class="select-box" style="width: 96%;" ng-show="esgProfile.getToggleState(item.id)">
                    <option ng-selected="e.id == esgProfile.DefaultProfile.templateType" style="width: 96%;">{{esgProfile.imposeTemplateType(item)}}</option>
                </select>
            </div>
            <div class="table-cell_g center-align width_130" ng-class="{'last':$last}">
                <span style="width: 96%;" ng-show="!esgProfile.getToggleState(item.id)">{{esgProfile.imposeCompanyType(item)}}</span>
                <select required class="select-box" style="width: 96%;" ng-show="esgProfile.getToggleState(item.id)">
                    <option ng-selected="e.id == esgProfile.DefaultProfile.companyType" style="width: 96%;">{{esgProfile.imposeCompanyType(item)}}</option>
                </select>
            </div>
            <div class="table-cell_g center-align width_130" ng-class="{'last':$last}">
                <span style="width: 96%;" ng-show="true">{{esgProfile.convertActiveStatusType(item)}}</span>
            </div>
            <div class="table-cell_g center-align width_130" ng-class="{'last':$last}">
                <span style="width: 96%;" ng-show="!esgProfile.getToggleState(item.id)">{{esgProfile.convertSuggestedStatusType(item)}}</span>
                <select class="select-box" style="width: 96%;" ng-show="esgProfile.getToggleState(item.id)" ng-model="esgProfile.isSuggested">
                    <option>Yes</option>
                    <option>No</option>
                </select>
            </div>
            <div class="table-cell_g center-align width_130" ng-class="{'last':$last}">
                <a href="" style="margin-right: 10px; float: left;" ng-show="!esgProfile.getToggleState(item.id) && !(item.id == esgProfile.DefaultProfile.id)" ng-click="esgProfile.toggleEditMode(item.id)">Edit</a>
                <a href="" style="margin-right: 10px; float: left;" ng-show="esgProfile.getToggleState(item.id)  && !(item.id == esgProfile.DefaultProfile.id)" ng-click="esgProfile.saveProfile(item)">Save</a>
                <a href="" style="margin-right: 10px; float: left;" ng-show="!esgProfile.getToggleState(item.id) && !(item.id == esgProfile.DefaultProfile.id)" ng-click="esgProfile.deleteProfile(item)">Delete</a>
                <a href="" style="margin-right: 10px; float: left;" ng-show="esgProfile.getToggleState(item.id)  && !(item.id == esgProfile.DefaultProfile.id)" ng-click="esgProfile.cancelEditAddEsgProfile(item)">Cancel</a>
            </div>
        </div>
    </div>
    <!-- NEW HTML -->
</form>
    






<div class="footer-wrap">
    <div class="footer">
        <ul class="footer-nav">
            <li><a href="">Policies</a></li>
            <li><a href="">Sitemap</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Team Sustainalytics</a></li>
        </ul>
        <div class="copyright">
            ©Sustainalytics. All Rights Reserved
        </div>
        <div class="clear">&nbsp;</div>
    </div>
</div>